<template>
	<view class="seat-com">
		<view class="prompt">
			<view class="unpick">
				<view class="btn">A1</view>
				<view class="name">Available Seat</view>
			</view>
			<view class="pick">
				<view class="btn">A1</view>
				<view class="name">Not Available Seat</view>
			</view>
		</view>
		<view class="select-room-seat">
			<view class="select-seat">
				<view class="seat-box">
					<view class="seat-top">
						<view class="wc1">WC</view>
						<view class="room-num">{{activeRoom}}</view>
						<view class="wc2">WC</view>
					</view>
					<view class="seat-bottom" id="seat-bottom">
						<view class="row" v-for="(val, name, index) in seat[activeRoom]" :key="name">
							<view :class="nameActive(item)" v-for="item in seat[activeRoom][name]"
								@click="activeChange(item)"
								:style="{width: ((seatBottomWidth - 30) / 6) + 'px', height: ((seatBottomWidth - 30) / 6) + 'px'}">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="select-room">
				<view :class="activeRoom === name ? 'active-room' : 'room'" v-for="(val, name, index) in seat"
					:key="name" @click="roomChange(name)">
					<view>{{name}}</view>
					<view v-if="index+1 !== Object.keys(props.seat).length" class="room-line"></view>
				</view>
			</view>
		</view>
		<view v-if="payArr.length" class="submit" @click="submit">Continue</view>
		<view v-else class="noSubmit">Continue</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, onMounted, reactive, toRefs, watch } from 'vue';
	const emit = defineEmits(['activeRoom', 'submitPay']);
	// 接收值
	const props = defineProps({
		seat: {
			type: Object,
			default: {}
		}
	})

	interface payArrType {
		num : string;
		isSelect : boolean;
		userId : string;
		isPay : boolean
	}
	interface userInforType {
		id : string;
	}
	interface dataType {
		activeRoom : string;
		seat : object;
		seatBottomWidth : number;
		userInfor : userInforType;
		payArr : payArrType[]
	}

	const data : dataType = reactive({
		// 当前放映厅
		activeRoom: '01',
		// 座位数据
		seat: {},
		// 选座盒子的宽度
		seatBottomWidth: 0,
		// 用户信息
		userInfor: uni.getStorageSync("userInfor")[0],
		// 购买数组
		payArr: []
	})

	const { activeRoom, seat, seatBottomWidth, payArr } = toRefs(data)

	onMounted(() => {
		// 获取选座盒子的宽度
		const query = uni.createSelectorQuery().in(this);
		query.select('#seat-bottom').boundingClientRect(res => {
			data.seatBottomWidth = res.width
		}).exec()
	})

	const nameActive = computed(() => (val : { isSelect : boolean, isPay : boolean, userId : string }) => {
		if (val.isSelect && val.isPay && val.userId === data.userInfor.id) {
			return 'seat-pay'
		} else if (val.isSelect && val.isPay && val.userId !== data.userInfor.id) {
			return 'other-pay'
		} else if (val.isSelect) {
			return 'seat-active'
		} else {
			return 'seat-con'
		}
	})

	// 点击播放厅
	const roomChange = (val : string) => {
		// 切换放映厅
		data.activeRoom = val
		// 将当前放映厅传给父组件
		emit('activeRoom', val);
	}

	// 点击座位
	const activeChange = (val : { isSelect : boolean, userId : string, isPay : boolean, num : string }) => {
		let flg = true
		if (val.userId === '') {
			flg = true
		} else {
			if (val.userId !== data.userInfor.id) {
				flg = false
			} else {
				if (val.isSelect && val.isPay && val.userId) {
					flg = false
				}
			}
		}
		if (flg) {
			val.isSelect = !val.isSelect
			val.userId = val.isSelect ? data.userInfor.id : ''
		}
		if (!val.isPay && val.isSelect) {
			data.payArr.push(val)
		} else {
			data.payArr = data.payArr.filter(v => v.num !== val.num)
		}
	}

	// 点击提交
	const submit = () => {
		emit('submitPay', data.payArr)
	}
	// 监听props
	watch(() => props.seat, (val) => {
		// 初始为第一放映厅
		data.seat = JSON.parse(JSON.stringify(val))
	})
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #050110;
	}

	.prompt {
		padding: 36.5rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.unpick,
	.pick {
		display: flex;
		align-items: center;
	}

	.unpick .btn,
	.pick .btn {
		color: #fd686a;
		border: 1.82rpx solid #fd686a;
		border-radius: 7.3rpx;
		padding: 9.12rpx;
		margin-right: 18.25rpx;
		font-size: 25.55rpx;
	}

	.pick .btn {
		color: #bbbacc;
		border: 1.82rpx solid #bbbacc;
	}

	.unpick .name,
	.pick .name {
		color: #fff;
		font-size: 23.72rpx;
	}

	.select-room-seat {
		display: flex;
		justify-content: space-between;
	}

	.select-seat {
		width: 70%;
		border: 5.47rpx solid #fff;
		border-radius: 45.62rpx;
		padding: 27.37rpx 27.37rpx 54.74rpx;
	}

	.seat-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wc1,
	.wc2 {
		border: 1.82rpx solid #bbbacc;
		padding: 27.37rpx 54.74rpx;
		border-radius: 45.62rpx 0 0 0;
	}

	.wc2 {
		border-radius: 0 45.62rpx 0 0;
	}

	.room-num {
		padding: 18.25rpx;
		background: #35343a;
		border-radius: 9.12rpx;
	}


	.select-room .room,
	.select-room .active-room {
		background-color: #2e2642;
		padding: 54.74rpx 18.25rpx;
		position: relative;
		margin-top: 31.02rpx;
		border-radius: 9.12rpx;
	}

	.select-room .active-room {
		background-color: #f76c67;
	}

	.room-line {
		position: absolute;
		width: 18.25rpx;
		height: 31.02rpx;
		background: #fff;
		bottom: -31.02rpx;
		left: 50%;
		transform: translate(-50%);
	}

	.seat-bottom {
		margin-top: 54.74rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.seat-con,
	.seat-active,
	.seat-pay,
	.other-pay {
		color: #fd686a;
		border: 1.82rpx solid #fd686a;
		border-radius: 7.3rpx;
		font-size: 25.55rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 27.37rpx;
	}

	.seat-active {
		background: #fffdff;
	}

	.seat-pay {
		background: #fd686a;
		color: #fff;
	}

	.other-pay {
		border: 1.82rpx solid #888799;
		color: #888799;
	}

	.submit,
	.noSubmit {
		margin: 36.5rpx 0;
		background: #fd686a;
		border-radius: 18.25rpx;
		text-align: center;
		padding: 36.5rpx 0;
	}

	.noSubmit {
		background: #888799
	}
</style>